/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
:root{
	--header-width: 222px;
	--slide-close-width: 150px;
	--font-family: "Leroy Merlin", sans-serif;
	--primary-color: #54B201;
	--bkpt: 1920;
}

body{
    display: flex;
	height: 100vh;
    max-width: 1440px;
    margin: auto;
}
@media screen and (max-width: 1024px) {
	body{
		height: auto;
		flex-direction: column;
	}
}

body footer#site-footer{
    display: none;
}
body .elementor-location-header{
    width: var(--header-width);
}
@media screen and (max-width: 1024px) {
	body .elementor-location-header{
		width: 100%;
	}
}

body #main{
	flex: 1;
	height: 100vh;
    overflow: auto;
	padding: 10px 0;
	background: white;
}
@media screen and (max-width: 1024px) {
	body #main{
		height: auto;
	}
}

body #main .elementor-section.elementor-section-boxed > .elementor-container{
	max-width: none;
}

/** HEADING **/
body #main h1{
	font-family: Futura;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 9px;
	color: #FFFFFF;
	margin: 0;
	margin-bottom: -28px;
    line-height: normal;
	background: #066084;
	padding: 8px 80px;
	text-transform: uppercase;
}
body #main .page-make-it h1{
	background: #906A48;
}
body #main .page-supports h1{
	background: #2B5C00;
}
@media screen and (max-width: 1024px) {
	padding: 8px 10px;
}

body #main .elementor-widget-heading:not(.h2-catalog) h2{
	font-family: Futura;
	font-size: 38px;
	font-weight: bold;
}

body #main .date p{
	font-family: Futura;
	font-size: 16px;
	font-weight: 500;
	color: #00080B;
	text-transform: capitalize;
}
body #main .date p:after{
	content: "";
	display: block;
	width: 17px;
	height: 3px;
	background: #54B201;
	margin-top: 10px;
}

body #main .elementor-widget-button .elementor-button{
	font-family: Futura;
	font-size: 19px;
	font-weight: bold;
	color: #FFFFFF;
	background: #7BB51C;
	padding: 8px 37px;
	text-transform: uppercase;
}

/** LOADER HOME **/
body .loader-page{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	z-index: 10000;
	background-color: #7BB51C;
	background-image: url('/wp-content/uploads/2021/09/loader@2x.png');
	background-repeat: no-repeat;
	background-position: center;
	opacity: 1;
	transition: opacity 0.5s 1.5s;
}

body .loader-page:after{
    content: "";
    border-top: 54px solid transparent;
    border-bottom: 54px solid transparent;
    border-left: 54px solid #FFFFFF;
    position: absolute;
    top: calc(50% - 51px);
    left: 0%;
	margin-left: -54px;
	transition: left .5s linear;
}
@keyframes slidein { from { left: 0%; } to { left: 42%; }  }
body .loader-page.loaded{
	/*animation: 1s linear 0s infinite running slidein;*/
	opacity: 0;
}

body .loader-page.loaded:after{
	left: 45%;
}

body.elementor-page-1570 .loader-page{
	display: block;
}
@media screen and (max-width: 1024px) {
	body.elementor-page-1570 .loader-page{
		display: none;
	}
}

/** SLIDER HOME **/
body #main .slide-home{
    width: calc(100% - 7px);
	counter-reset: item;
	height: 100%;
	position: relative;
	top: 0;
	transition: top 2s;
}
@media screen and (max-width: 1024px) {
	body #main .slide-home{
		width: 100%;
	}
}

body #main .slide-home:after{
	content: "Faites de votre kaz\ALe plus bel endroit sur terre";
	position: absolute;
	right: 135px;
	top: 87px;
	font-family: Futura;
	font-size: 24px;
	font-weight: bold;
	color: #FFFFFF;
	text-transform: uppercase;
	text-align: center;
	display: inline-block;
	max-width: calc(100vw - 600px - 222px - 40px - 20px);
    padding: 0 10px;
	white-space: pre;
}
@media screen and (max-width: 1024px) {
	body #main .slide-home:after{
		display: none;
	}
}

body #main .slide-home .elementor-top-column{
	overflow: hidden;
    width: var(--slide-close-width);
    height: calc(100vh - 20px);
	transition: all .5s;
	z-index:1;
}
@media screen and (max-width: 1024px) {
	body #main .slide-home .elementor-top-column{
		width: 100%;
		/*height: calc(116px + 100px);*/
		height: auto;
		transition: max-height 1s ease;
		max-height: 150px;
	}
	
	body #main .slide-home .elementor-top-column.open{
		max-height: 1000px;
	}
}
body #main .slide-home .elementor-top-column > .elementor-column-wrap{
    width: calc(100vw - (var(--slide-close-width) * 2) - var(--header-width));
	max-width: 911px;
	transition: width .5s;
}
@media screen and (max-width: 1024px) {
	body #main .slide-home .elementor-top-column > .elementor-column-wrap{
		width: 100%;
		max-width: none;
	}
}

body #main .slide-home > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap{
    display: flex;
    flex-direction: row;
	flex-wrap: nowrap;
}
@media screen and (max-width: 1024px) {
	body #main .slide-home > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap{
		flex-direction: column;
		/*flex-wrap: wrap;*/
	}
}

body #main .slide-home .item-button{
    position: absolute;
    z-index: 10000;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    bottom: calc(var(--slide-close-width) * -1);
    width: calc(100vh - 20px);
	height: var(--slide-close-width);
    margin: 0;
    background: white;
    border-bottom: 1px solid #000000;
	opacity: 1;
	transition: all .5s;
}
@media screen and (max-width: 1024px) {
	body #main .slide-home .item-button{
		position: static;
		transform: none;
		width: 100%;
		height: auto;
		padding: 10px;
	}
}

body #main .slide-home .elementor-top-column:last-child .item-button{
	border: 0;
}

body #main .slide-home .item-button:after{
	counter-increment: item;
	content: "0" counter(item);
	position: absolute;
    right: 0;
    top: 15px;
    transform: rotate(90deg);
	font-family: "Bodoni";
	font-weight: bold;
	font-size: 34px;
	line-height: normal;
	pointer-events: none;
}
body #main .slide-home .item-button:hover:after{
	color: #7BB51C;
}
@media screen and (max-width: 1024px) {
	body #main .slide-home .item-button:after{
		transform: none;
		left: 10px;
		top: 0;
		font-size: 77px;
	}
}

body #main .slide-home > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap > .elementor-section > .elementor-container,
body #main .slide-home > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap > .elementor-section > .elementor-background-overlay{
    height: calc(100vh - 20px);
	width: calc(100vw - (var(--slide-close-width) * 2) - var(--header-width));
	max-width: 918px;
	opacity: 1;
	transition: opacity .5s;
}
@media screen and (max-width: 1024px) {
	body #main .slide-home > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap > .elementor-section > .elementor-container,
	body #main .slide-home > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap > .elementor-section > .elementor-background-overlay{
		height: 100vh;
		width: 100%;
	}
}

body #main .slide-home .elementor-top-column.open{
	flex: 1;
}
@media screen and (max-width: 1024px) {
	body #main .slide-home .elementor-top-column.open{
		height: auto;
		flex: none;
	}
	
	body #main .slide-home .elementor-top-column:not(.open) section{
		display: none;
	}
}

body #main .slide-home .elementor-top-column.open .item-button{
	opacity: 0;
}
@media screen and (max-width: 1024px) {
	body #main .slide-home .elementor-top-column.open .item-button{
		opacity: 1;
	}
}

/* Button style */
body #main .slide-home .item-button a:first-of-type{
	text-align: left;
    font-weight: 500;
    font-family: Futura;
    font-size: 36px;
	text-transform: uppercase;
	letter-spacing: 0px;
	color: #000000;
	background: none;
	padding: 15px 0 98px;
	width: 100%;
}

body #main .slide-home .item-button a:first-of-type:hover{
    font-weight: 600;
    font-size: 62px;
	color: #7BB51C;
}
@media screen and (max-width: 1024px) {
	body #main .slide-home .item-button a:first-of-type{
		color: #7BB51C;
	    font-size: 32px;
		font-weight: bold;
		padding: 61px 0 0px;
	}
	body #main .slide-home .item-button a:first-of-type:hover{
	    font-size: 32px;
	}
}

/* Item content style */
body #main .slide-home .item-content h2{
	font-family: Futura;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 9.9px;
	color: #FFFFFF;
	background: #066084;
	display: inline-block;
	padding: 8px 83px;
	position: relative;
	z-index: 2;
}
body #main .slide-home .elementor-top-column:nth-of-type(2) .item-content h2 {
	background: #906A48;
}
body #main .slide-home .elementor-top-column:nth-of-type(3) .item-content h2 {
	background: #A29779;
}
body #main .slide-home .elementor-top-column:nth-of-type(4) .item-content h2 {
	background: #0A94C8;
}

body #main .slide-home .item-content .elementor-widget-heading{
	position: relative;
	margin-bottom: 120px;
}
body #main .slide-home .item-content .elementor-widget-heading:before{
    content: "0" counter(item);
    /*position: absolute;*/
	left: 0;
    top: -240px;
    z-index: 1;
    width: 100%;
    text-align: center;
    font-family: Bodoni;
    font-size: 342px;
    color: #FFFFFF;
}

body #main .slide-home .item-content .elementor-widget-text-editor{
	max-width: 471px;
	margin: auto;
	background: rgba(255, 255, 255, 0.86);
	border: 4px solid #066084;
	border-left: 0;
	border-right: 0;
	padding: 20px;
	font-family: Futura;
	font-size: 16px;
	color: #000000;
	margin-bottom: 30px;
}

body #main .slide-home .elementor-top-column:nth-of-type(2) .item-content .elementor-widget-text-editor {
	border-color: #906A48;
}
body #main .slide-home .elementor-top-column:nth-of-type(3) .item-content .elementor-widget-text-editor {
	border-color: #A29779;
}
body #main .slide-home .elementor-top-column:nth-of-type(4) .item-content .elementor-widget-text-editor {
	border-color: #0A94C8;
}

body #main .slide-home .item-content .elementor-widget-text-editor p{
	margin: 0;
}

body #main .slide-home .item-content a{
	font-family: Futura;
	font-size: 19px;
	font-weight: bold;
	color: #FFFFFF;
	background: #7BB51C;
	padding: 7px 34px;
}

@media (max-width: 1920px){	
	body #main .slide-home .item-content .elementor-widget-heading{
		margin-bottom: calc(100vw * 120 / var(--bkpt));
	}
	
	body #main .slide-home .item-content .elementor-widget-heading:before{
		top: calc(100vw * -240 / var(--bkpt));
		font-size: calc(100vw * 342 / var(--bkpt));
	}
	
	body #main .slide-home .item-content .elementor-widget-text-editor{
		max-width: calc(100vw * 471 / var(--bkpt));
		border: calc(100vw * 4 / var(--bkpt)) solid #066084;
		padding: calc(100vw * 20 / var(--bkpt));
		font-size: calc(100vw * 16 / var(--bkpt));
		margin-bottom: calc(100vw * 30 / var(--bkpt));
	}
}

@media (max-width: 1920px) and (min-width: 1024px) and (max-height: 963px){
	body #main .slide-home .item-content .elementor-widget-heading{
		margin-bottom: calc(100vh * 120 / 963);
	}
	
	body #main .slide-home .item-content .elementor-widget-heading:before{
		top: calc(100vh * -240 / 973);
		font-size: calc(100vh * 342 / 963);
	}
	
	body #main .slide-home .item-content .elementor-widget-text-editor{
		max-width: calc(100vh * 471 / 963);
		border: calc(100vh * 4 / 963) solid #066084;
		padding: calc(100vh * 20 / 963);
		font-size: calc(100vh * 16 / 963);
		margin-bottom: calc(100vh * 30 / 963);
	}
}

@media screen and (max-width: 1024px) {
	:root{
		--bkpt: 1024;
	}
	body #main .slide-home .item-content .elementor-widget-heading:before{
		display: none;
	}
}

@media screen and (max-width: 768px) {
	:root{
		--bkpt: 768;
	}
}

@media screen and (max-width: 480px) {
	:root{
		--bkpt: 480;
	}
}

/* PAGE CONTENT */
body #main .box > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap:before{
    content: "";
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
    border-top: 97px solid #FFFFFF;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -80px;
}

body #main .box h2:before{
    content: "";
    border-top: 45px solid transparent;
    border-bottom: 45px solid transparent;
    border-left: 56px solid #54B200;
    position: absolute;
    top: -15px;
    left: -120px;
}

body #main .selection-grid:before{
	content: "";
	display: block;
	width: 17px;
	height: 3px;
	background: #54B201;
	margin-bottom: 10px;
}

body #main .intervenant-resume p{
	font-family: Futura;
	font-size: 16px;
	font-weight: bold;
	color: #066084;
	line-height: normal;
}

body #main .produit-resume h3{
	font-family: Futura;
	font-size: 11px;
	font-weight: 500;
	color: #00080B;
	display: inline-block;
	text-transform: capitalize;
}

body #main .intervenant-resume p strong{
	font-family: Futura;
	font-size: 10px;
	font-weight: 500;
	color: #00080B;
	display: inline-block;
}

body #main .intervenant-resume .elementor-button-info a,
body #main .produit-resume .elementor-button-info a{
	font-family: Futura;
	font-size: 10px;
	font-weight: bold;
	color: #066084;
	text-transform: uppercase;
	line-height: normal;
	padding:0;
	background: none;
}

body #main .intervenant-resume a i,
body #main .produit-resume a i{
	color: #14B601;
	font-size: 16px;
}
body #main .intervenant-resume .elementor-button-content-wrapper,
body #main .produit-resume .elementor-button-content-wrapper{
    align-items: center;
}

body #main .difficulty{
    width: 70px;
}
body #main .difficulty .elementor-star-rating__wrapper{
	flex-direction: column-reverse;
}
body #main .difficulty .elementor-star-rating{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
}

body #main .make-it ol{
	list-style: none;
	counter-reset: my-awesome-counter;
}
body #main .make-it ol li {
	counter-increment: my-awesome-counter;
	position: relative;
}
body #main .make-it ol li::before{
	content: counter(my-awesome-counter);
	font-family: Futura;
	font-size: 22px;
	font-weight: bold;
	color: #906A48;
	display: block;
	position: relative;
	left: -15px;
}
body #main .make-it ol li::after{
	content: "\f0da";
	display: block;
	position: absolute;
	top: 34px;
	left: -9px;
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	color: #14B601;
}

/** SUPPORTS **/
body #main .page-supports h2{
	font-family: Futura;
	font-size: 52px;
	font-weight: bold;
	text-transform: uppercase;
}
body #main .page-supports p{
	font-family: Futura;
	font-size: 19px;
	font-weight: 500;
	color: #00080B;	
}

body #main .page-catalogues .catalogs{
	counter-reset: cata-counter;
}

body #main .page-catalogues .catalogs article.elementor-post:nth-child(2){
	margin-top: 300px;
}
body #main .page-catalogues .catalogs article.elementor-post {
	counter-increment: cata-counter+1;
	position: relative;
}
body #main .page-catalogues .catalogs:not(.guides) article.elementor-post:before{
	content: counter(cata-counter);
}

body #main .page-catalogues .catalogs article.elementor-post:before{
	font-family: "Futura";
	font-size: 262px;
	line-height: normal;
	font-weight: bold;
	color: #D3D3D3;
	position: absolute;
	top: -72px;
    left: 0;
}
body #main .page-catalogues .catalogs:not(.guides) article.elementor-post:after{
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 5px;
	margin-left: -56px;
	height: 0;
	width: 0;
	border-right: 56px solid transparent;
	border-top: 56px solid #54B200;
	border-left: 56px solid transparent;
	z-index: 1;
}
